<template>
  <div class="box">
    <homeTop></homeTop>
    <!-- 图片 -->
    <div class="imgbox">
      <!-- <img :src="imagePic" alt="" @click="changeimg()" /> -->
      <Image :dataSrc="imagePic" alt="" @click="changeimg()"></Image>
      <p @click="seemessage">查看资料>>></p>
    </div>
    <!-- 主体 -->
    <div class="main">
      <div class="listbox">
        <img src="../../images/image/my/history.png" alt="" @click="historytuai" />
        <p @click="historytuai">历史问诊</p>
      </div>
      <div class="listbox">
        <img
          src="../../images/image/my/huio.png"
          alt=""
          @click="monytioa"
          style="margin-left: 1rem; width: 2.5rem"
        />
        <p @click="monytioa">我的钱包</p>
      </div>
      <div class="listbox">
        <img src="../../images/image/my/mony.png" alt="" @click="ujian" />
        <p @click="ujian">被采纳建议</p>
      </div>
      <div class="listbox">
        <img src="../../images/image/my/jian.png" @click="oktiao" alt="" style="width: 2.5rem" />
        <p @click="oktiao">设置自动回复</p>
      </div>
      <van-action-sheet
        v-model:show="show"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @select="goToSetPortraitPhoto"
        @cancel="onCancel"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import homeTop from '../../components/homeTop/index.vue'
import { usecurrentStore } from '../../stores/my'
import router from '@/router'
import { ref } from 'vue'
import { showToast } from 'vant'
import { useRoute } from 'vue-router'
import Image from '@/components/image/index.vue'

const route = useRoute()
const { imagePic } = route.query
console.log(imagePic, 'trdfyugh')

const state: any = usecurrentStore()
if (imagePic) {
  state.myResults.imagePic = imagePic
  console.log('ss', state.myResults.imagePic)
}

const show = ref(false)
const actions = [{ name: '更换形象照' }]
const onCancel = () => showToast('取消')
onMounted(async () => {
  try {
    const doctorId = state.doctorId
    const sessionId = state.sessionId
    await state.handmydata(doctorId, sessionId)
    state.myResults.imagePic = imagePic
  } catch (error) {
    console.log('失败', error)
  }
})
//更改形象照
const changeimg = () => {
  show.value = true
  const newImageFile = ''
}
// 跳转到设置形象照页面的方法
const goToSetPortraitPhoto = () => {
  router.push('/setportraitphoto')
}
const seemessage = () => {
  const doctorId = state.doctorId
  const sessionId = state.sessionId
  router.push({
    path: '/myprofile',
    query: { doctorId, sessionId }
  })
}
const historytuai = () => {
  router.push('/historicalconsultation')
}
const monytioa = () => {
  router.push('/mywallet')
}
const ujian = () => {
  router.push('/adopt')
}
const oktiao = () => {
  router.push('/setautomaticreply')
}
</script>
<style scoped lang="scss">
.box {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.imgbox {
  width: 100%;
  height: 5rem;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  p {
    position: absolute;
    bottom: 2%;
    right: 5%;
    color: rgb(44, 176, 176);
    font-size: 15px;
  }
}
.main {
  flex: 1;
  .listbox {
    width: 4rem;
    height: 4.2rem;
    // background-color: red;
    border: 1px solid rgb(220, 217, 217);
    box-shadow:
      3px 3px 5px rgba(74, 74, 74, 0.3),
      10px 10px 20px rgba(105, 104, 104, 0.5);
    float: left;
    margin-left: 0.7rem;
    margin-top: 1rem;
    img {
      width: 2rem;
      height: 2.5rem;
      margin-top: 0.2rem;
      margin-left: 0.9rem;
    }
    p {
      text-align: center;
      font-size: 17px;
    }
  }
}
</style>
